<template>
  <div class="m-[25px_15px] md:m-[25px_40px] xl:m-[50px] lg:flex">
    <div class="hidden lg:block w-1/4 max-w-[400px] pr-[30px] xl:pr-[50px]">
      <div class="relative h-0 pt-[150.27%] overflow-hidden bg-secondary">
        <UseImage
          :src="poster"
          width="200"
          height="600"
          class="absolute top-0 left-0 size-full"
          :alt="name"
        >
          <template #loading>
            <div class="flex items-center justify-center size-full">
              <RiLoaderLine class="size-8 animate-spin" />
            </div>
          </template>

          <template #error>
            <div class="absolute left-0 top-0 flex items-center justify-center size-full">
              <RiFileImageLine class="size-9" />
            </div>
          </template>
        </UseImage>
      </div>
    </div>

    <div class="lg:flex-[1]">
      <div
        v-if="item.overview"
        class="max-w-[1000px] mb-[30px] text-[15px] text-[#fafafa] text-base"
      >
        <h2 class="mb-[10px] text-lg text-white xl:text-[24px]">Storyline</h2>

        <div v-html="item.overview" />
      </div>

      <div class="mb-[30px] text-[15px] text-[#fafafa] xl:text-base">
        <ul class="xl:flex xl:flex-wrap">
          <li class="flex py-2 lg:w-1/2 2xl:w-full" v-if="item.release_date">
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Released
            </div>

            <div class="flex-[2]">
              {{ fullDate(item.release_date) }}
            </div>
          </li>
          <li class="flex py-2 lg:w-1/2 2xl:w-full" v-if="item.runtime">
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Runtime
            </div>

            <div class="flex-[2]">
              {{ runtime(item.runtime) }}
            </div>
          </li>
          <li class="flex py-2 lg:w-1/2 2xl:w-full" v-if="directors">
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Director
            </div>

            <div class="flex-[2]">
              <a
                :href="`/person/${person.id}`"
                v-for="person in directors"
                :key="person.id"
                class="text-primary underline ml-2 first:ml-0"
                >{{ person.name }}</a
              >
            </div>
          </li>
          <li class="flex py-2 lg:w-1/2 2xl:w-full" v-if="item.budget">
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Budget
            </div>

            <div class="flex-[2]">${{ numberWithCommas(item.budget) }}</div>
          </li>
          <li class="flex py-2 lg:w-1/2 2xl:w-full" v-if="item.revenue">
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Revenue
            </div>

            <div class="flex-[2]">${{ numberWithCommas(item.revenue) }}</div>
          </li>
          <li
            class="flex py-2 lg:w-1/2 2xl:w-full"
            v-if="item.genres && item.genres.length"
          >
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Genre
            </div>

            <div class="flex-[2]">
              <router-link
                :to="{ name: 'genreMovie', params: { id: genre.id } }"
                v-for="genre in item.genres"
                :key="genre.id"
                class="text-primary underline ml-1 first:ml-0"
                >{{ genre.name }}</router-link
              >
            </div>
          </li>
          <li class="flex py-2 lg:w-1/2 2xl:w-full" v-if="item.status">
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Status
            </div>

            <div class="flex-[2]">
              {{ item.status }}
            </div>
          </li>
          <li
            class="flex py-2 lg:w-1/2 2xl:w-full"
            v-if="item.original_language"
          >
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Language
            </div>

            <div class="flex-[2]">
              {{ fullLang(item.original_language) }}
            </div>
          </li>
          <li
            class="flex py-2 lg:w-1/2 2xl:w-full"
            v-if="item.production_companies && item.production_companies.length"
          >
            <div
              class="sm:max-w-[90px] max-w-[110px] flex-[1] mr-[15px] text-white"
            >
              Production
            </div>

            <div class="flex-[2]">
              {{ arrayToList(item.production_companies) }}
            </div>
          </li>
        </ul>
      </div>

      <ExternalLinks :links="item.external_ids" />
    </div>
  </div>
</template>
<script setup>
import {
  fullLang,
  arrayToList,
  numberWithCommas,
  fullDate,
  runtime,
} from "@/lib/filter";
import { apiImgUrl } from "@/api";
import { useDetails } from "@/hooks/useDetails";
import { computed } from "vue";
import ExternalLinks from "./ExternalLinks.vue";
import { UseImage } from "@vueuse/components";
import { RiFileImageLine, RiLoaderLine } from "vue-icons-plus/ri";

const { item } = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const { name, directors } = useDetails(item);

if (item.homepage) {
  item.external_ids.homepage = item.homepage;
}

const poster = computed(() => {
  if (item.poster_path) {
    return `${apiImgUrl}/w370_and_h556_bestv2${item.poster_path}`;
  } else {
    return false;
  }
});
</script>
